<template>
  <div class="page-container">
    <!-- 良率概览卡片 -->
    <el-card class="overview-card">
      <div class="overview-content">
        <div class="overview-item">
          <div class="overview-value">95.8%</div>
          <div class="overview-label">当前良率</div>
        </div>
        <div class="overview-item">
          <div class="overview-value">+2.3%</div>
          <div class="overview-label">环比提升</div>
        </div>
        <div class="overview-item">
          <div class="overview-value">96.5%</div>
          <div class="overview-label">目标良率</div>
        </div>
      </div>
    </el-card>

    <!-- 良率趋势图 -->
    <el-card class="chart-card">
      <template #header>
        <div class="card-header">
          <span>良率趋势</span>
          <el-select v-model="selectedProduct" placeholder="选择产品" size="small">
            <el-option
              v-for="item in productOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </template>
      <div class="chart-container">
        <v-chart class="chart" :option="yieldTrendOption" autoresize />
      </div>
    </el-card>

    <!-- 不良原因分析 -->
    <el-card class="analysis-card">
      <template #header>
        <div class="card-header">
          <span>不良原因分析</span>
          <el-radio-group v-model="analysisType" size="small">
            <el-radio-button label="quantity">数量</el-radio-button>
            <el-radio-button label="cost">成本</el-radio-button>
          </el-radio-group>
        </div>
      </template>
      <div class="chart-container">
        <v-chart class="chart" :option="defectAnalysisOption" autoresize />
      </div>
    </el-card>

    <!-- 不良记录列表 -->
    <el-card class="record-card">
      <template #header>
        <div class="card-header">
          <span>不良记录</span>
          <el-button type="primary" link>查看全部</el-button>
        </div>
      </template>
      <el-table :data="defectRecords" style="width: 100%">
        <el-table-column prop="time" label="时间" width="180" />
        <el-table-column prop="product" label="产品" />
        <el-table-column prop="defectType" label="不良类型" />
        <el-table-column prop="quantity" label="数量" width="100" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === '已处理' ? 'success' : 'warning'">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart } from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  DataZoomComponent
} from 'echarts/components'
import VChart from 'vue-echarts'

// 注册 ECharts 组件
use([
  CanvasRenderer,
  LineChart,
  PieChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  DataZoomComponent
])

// 产品选择
const selectedProduct = ref('all')
const productOptions = [
  { value: 'all', label: '全部产品' },
  { value: 'product1', label: '产品A' },
  { value: 'product2', label: '产品B' },
  { value: 'product3', label: '产品C' }
]

// 分析类型
const analysisType = ref('quantity')

// 良率趋势图配置
const yieldTrendOption = ref({
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['实际良率', '目标良率']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value',
    min: 90,
    max: 100,
    axisLabel: {
      formatter: '{value}%'
    }
  },
  series: [
    {
      name: '实际良率',
      type: 'line',
      data: [95.2, 94.8, 95.5, 96.1, 95.8, 95.9, 95.8],
      markLine: {
        data: [{ type: 'average', name: '平均值' }]
      }
    },
    {
      name: '目标良率',
      type: 'line',
      data: [96.5, 96.5, 96.5, 96.5, 96.5, 96.5, 96.5],
      lineStyle: {
        type: 'dashed'
      }
    }
  ]
})

// 不良原因分析图配置
const defectAnalysisOption = ref({
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    right: 10,
    top: 'center'
  },
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '14',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 35, name: '尺寸偏差' },
        { value: 25, name: '表面缺陷' },
        { value: 20, name: '材料问题' },
        { value: 15, name: '装配不良' },
        { value: 5, name: '其他' }
      ]
    }
  ]
})

// 不良记录列表
const defectRecords = ref([
  {
    time: '2024-03-20 14:30',
    product: '产品A',
    defectType: '尺寸偏差',
    quantity: 5,
    status: '已处理'
  },
  {
    time: '2024-03-20 13:15',
    product: '产品B',
    defectType: '表面缺陷',
    quantity: 3,
    status: '处理中'
  },
  {
    time: '2024-03-20 11:45',
    product: '产品A',
    defectType: '材料问题',
    quantity: 2,
    status: '已处理'
  }
])
</script>

<style lang="scss" scoped>
.overview-card {
  margin-bottom: 16px;
}

.overview-content {
  display: flex;
  justify-content: space-around;
  padding: 16px 0;
}

.overview-item {
  text-align: center;
}

.overview-value {
  font-size: 24px;
  font-weight: bold;
  color: var(--el-color-primary);
  line-height: 1.2;
}

.overview-label {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  margin-top: 4px;
}

.chart-card,
.analysis-card,
.record-card {
  margin-bottom: 16px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  height: 300px;
}

.chart {
  height: 100%;
}
</style> 